<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('货位分析')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
</head>
<body class="gray-bg">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="tb" data-options="region:'center。。'" style="text-align: center ">
    <fieldset style="border-color: #E7F0FF">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        <label>巷道：</label>
                        <select id="roadway" name="roadway" th:height="300px" onchange="nonMsg()">

                        </select>
                    </li>
                </ul>
            </div>
        </form>

    </fieldset>
</div>
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/js/echarts.min.js"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $.post("/device/basRoadway/list1",{warehouse_id:'01'},function(data){

            $("#roadway").append("<option value='0' selected >"+"--全部--"+"</option>");
            // alert(data.rows[0].inOrOut);
            for(var i=0;i<data.total;i++){
                $("#roadway").append("<option value="+data.rows[i].roadway_id+">"+data.rows[i].roadway_name+"</option>");
            }
        });
    });
    $(document).ready(function () {
        search();
    });
    function nonMsg() {
        search();
    }
    function search() {
       var b = $("#roadway").val();
        b=null;
        if (b == 1) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 指定图表的配置项和数据

            $.ajax({
                "url": "/kpi/cs1",
                "type": "POST",
                "dataType": "json",
                "success": function (json) {
                    var s1 = json.s1;
                    var s2 = json.s2;
                    var s3 = json.s3;
                    var s4 = json.s4;
                    var s5 = json.s5;
                    var s6 = json.s6;
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({//加载数据图表
                        tooltip: {
                            formatter: '{b} : {c}',//默认值null，内容格式器
                        },
                        series: {
                            name: '货位分析',
                            type: 'pie',
                            //高亮显示光标选中区域
                            emphasis: {
                                itemStyle: {
                                    // 高亮时点的颜色
                                    color: 'red'
                                },
                            },
                            data: [
                                {value: s1, name: "空货位"},
                                {value: s2, name: "满货位"},
                                {value: s3, name: "入库分配"},
                                {value: s4, name: "出库分配"},
                                {value: s5, name: "入库需盘点"},
                                {value: s6, name: "出库需盘点"}
                            ]
                        }
                    });

                }
            });
            // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
        } else if (b == 2) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            $.ajax({
                "url": "/kpi/cs2",
                "type": "POST",
                "dataType": "json",
                "success": function (json) {
                    var s1 = json.s1;
                    var s2 = json.s2;
                    var s3 = json.s3;
                    var s4 = json.s4;
                    var s5 = json.s5;
                    var s6 = json.s6;
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({//加载数据图表
                        tooltip: {
                            formatter: '{b} : {c}',//默认值null，内容格式器
                        },
                        series: {
                            name: '货位分析',
                            type: 'pie',
                            //高亮显示光标选中区域
                            emphasis: {
                                itemStyle: {
                                    // 高亮时点的颜色
                                    color: 'red'
                                },
                            },
                            data: [
                                {value: s1, name: "空货位"},
                                {value: s2, name: "满货位"},
                                {value: s3, name: "入库分配"},
                                {value: s4, name: "出库分配"},
                                {value: s5, name: "入库需盘点"},
                                {value: s6, name: "出库需盘点"}
                            ]
                        }
                    });

                }
            });
            // 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);
        }else if (b == 3) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            $.ajax({
                "url": "/kpi/cs3",
                "type": "POST",
                "dataType": "json",
                "success": function (json) {
                    var s1 = json.s1;
                    var s2 = json.s2;
                    var s3 = json.s3;
                    var s4 = json.s4;
                    var s5 = json.s5;
                    var s6 = json.s6;
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({//加载数据图表
                        tooltip: {
                            formatter: '{b} : {c}',//默认值null，内容格式器
                        },
                        series: {
                            name: '货位分析',
                            type: 'pie',
                            //高亮显示光标选中区域
                            emphasis: {
                                itemStyle: {
                                    // 高亮时点的颜色
                                    color: 'red'
                                },
                            },
                            data: [
                                {value: s1, name: "空货位"},
                                {value: s2, name: "满货位"},
                                {value: s3, name: "入库分配"},
                                {value: s4, name: "出库分配"},
                                {value: s5, name: "入库需盘点"},
                                {value: s6, name: "出库需盘点"}
                            ]
                        }
                    });

                }
            });

        }else if (b == 4) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            $.ajax({
                "url": "/kpi/cs4",
                "type": "POST",
                "dataType": "json",
                "success": function (json) {
                    var s1 = json.s1;
                    var s2 = json.s2;
                    var s3 = json.s3;
                    var s4 = json.s4;
                    var s5 = json.s5;
                    var s6 = json.s6;
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({//加载数据图表
                        tooltip: {
                            formatter: '{b} : {c}',//默认值null，内容格式器
                        },
                        series: {
                            name: '货位分析',
                            type: 'pie',
                            //高亮显示光标选中区域
                            emphasis: {
                                itemStyle: {
                                    // 高亮时点的颜色
                                    color: 'red'
                                },
                            },
                            data: [
                                {value: s1, name: "空货位"},
                                {value: s2, name: "满货位"},
                                {value: s3, name: "入库分配"},
                                {value: s4, name: "出库分配"},
                                {value: s5, name: "入库需盘点"},
                                {value: s6, name: "出库需盘点"}
                            ]
                        }
                    });

                }
            });
        }else{
            var myChart = echarts.init(document.getElementById('main'));

            var b = $("#roadway").val();
             if (b==null){
                 b= "0"
             }
            $.ajax({
                "url": "/kpi/csbyRoadway?roadway="+b,
                "type": "POST",
                "dataType": "json",
                "success": function (json) {
                    var s1 = json.s1;
                    var s2 = json.s2;
                    var s3 = json.s3;
                    var s4 = json.s4;
                    var s5 = json.s5;
                    var s6 = json.s6;
                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({//加载数据图表
                        tooltip: {
                            formatter: '{b} : {c}',//默认值null，内容格式器
                        },
                        series: {
                            name: '货位分析',
                            type: 'pie',
                            //高亮显示光标选中区域
                            emphasis: {
                                itemStyle: {
                                    // 高亮时点的颜色
                                    color: 'red'
                                },
                            },
                            data: [
                                {value: s1, name: "空货位"},
                                {value: s2, name: "满货位"},
                                {value: s3, name: "入库分配"},
                                {value: s4, name: "出库分配"},
                                {value: s5, name: "入库需盘点"},
                                {value: s6, name: "出库需盘点"}
                            ]
                        }
                    });

                }
            });}
    }

</script>


</body>
</html>